import React, {Component} from 'react';
import './css/App.css';
import {HashRouter, Redirect, Route, Switch} from 'react-router-dom';
import asyncComponent from './untils/asyncComponent';
import {connect} from 'react-redux'
import Untils from './untils/untils'

const Do = asyncComponent(() => import('./pages/Do'));
const News = asyncComponent(() => import('./pages/news'));
const User = asyncComponent(() => import('./pages/user'));
const Article = asyncComponent(() => import('./pages/article'));
const Login = asyncComponent(() => import('./pages/login'));
const MyDoc = asyncComponent(() => import('./pages/myDoc'));
const SignName = asyncComponent(() => import('./pages/signName'));
const Advertise = asyncComponent(() => import('./pages/addvertise'));
const Nav = asyncComponent(() => import('./components/nav'));
const Footer = asyncComponent(() => import('./components/footer'));

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: null
        }
    }

    render() {
        const {head, foot} = this.props;
        let user = Untils.getLocalStorage('user');
        return (
            <HashRouter>
                <div className="appname" ref='appContainers'>
                    {
                        head.headStatus ? <Nav/> : ''
                    }
                    <Switch>
                        {/*<Route exact path='/' component={Do} />*/}
                        <Route path='/login' component={Login}/>
                        <Route path='/do' component={Do}/>
                        <Route path='/user' render={(props) => {
                            if (user) {
                                return <User {...props}/>
                            } else {
                                return <Login {...props} />
                            }
                        }}/>
                        <Route path='/news' component={News}/>
                        <Route path='/article' component={Article}/>
                        <Route path='/mydoc' component={MyDoc}/>
                        <Route path='/signname' component={SignName}/>
                        <Route path='/advertise' component={Advertise}/>
                        <Redirect from='/' to='/do'/>
                    </Switch>
                    {
                        foot.footStatus ? <Footer/> : ''
                    }
                </div>
            </HashRouter>
        )
    }

    componentDidMount() {
        this.setState({
            user: Untils.getLocalStorage('user')
        })
    }

    componentDidUpdate() {

    }

}

//获取stroe的值
function mapStateToProps(state) {
    return {
        head: state.headReducer,
        foot: state.footReducer,
    }
}

//修改store的值
// function mapDispatchToProps (dispatch) {
//
// dispatch(
//     { type: 'HIDE_HEAD' }
//     )
//
// }


export default connect(
    mapStateToProps
)(App)
